<template>
 <div class="bg">
   <div class="wrap">
     <div class="head">WIFI</div>
     <div class="content">
       <wifi-item
         v-for="(item, index) in aplist"
         :key="item.ssid"
         :item="item"
         :index="index"
         :currentIndex="currentIndex"
         @changeCurrentIndex="changeCurrentIndex"></wifi-item>
     </div>
   </div>
 </div>
</template>

<script>
import wifiItem from '../components/wifi-item'
export default {
  components: {
    'wifi-item': wifiItem
  },
  data() {
    return {
      currentIndex: -1,
      "aplist": []
    }
  },
  mounted() {
    this.$ajax.get('/api/v1/wifi/scaninfo')
    .then(data => {
        console.log(data)
        this.aplist = data.data
      })
      .catch(error => {
        console.log(error)
      })
  },
  methods: {
    changeCurrentIndex(payload){
      this.currentIndex = payload
      // todo 滚动到顶部
    }
  }
}
</script>
<style scoped>
.bg{
  background-image: url("../assets/sample_bg.png");
  height: 100vh;
  width: 100vw;
  background-position: top left;
  background-repeat: repeat-y;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrap {
  width: 80%;
  height: 400px;
  overflow-y: hidden;
  overflow-x: hidden;
  background: #fff;
  border-radius: 10px;
}
.head {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: #4288be;
  border-bottom: 1px solid #698293;
}
.content {
  max-height: 300px;
  overflow-y: scroll;
}
</style>
